<template>
  <div style="text-align: center" v-loading="loading">
    <div class="edit_fei">
      <el-transfer
          :titles="['可选职称类别', '已选职称类别']"
          v-model="value"
          :props="{ key: 'id', label: 'name'}"
          :data="data"
          style="width: 100%;"
          @change="handleChange"
      />
    </div>
    <div>
      <el-button @click="addlist" :disabled="value.length === 0">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { titleCategoryList, updateTitleCategory } from "@/api/researcherNavApi/zhlbszApi";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

const AllPeople = ref([]);
const initialValue = ref([]);
const isSelectionChanged = ref(false);
const loading = ref(false); // 新增：加载状态

onMounted(() => {
  titleCategoryList({ userFlag: "" })
      .then((res) => {
        data.value = res.data;
        titleCategoryList({ userFlag: "1" })
            .then((res) => {
              let rightA = [];
              for (let i = 0; i < res.data.length; i++) {
                rightA.push(res.data[i].id);
              }
              value.value = rightA;
              initialValue.value = [...rightA];
            });
      });
});

const rightArr = ref([]);
const handleChange = function (newVal, direction, movedKeys) {
  rightArr.value = data.value.filter(item => newVal.includes(item.id));
  console.log('选中的', rightArr.value);
  console.log('data', data.value);
  console.log('direction', direction);
  console.log('movedKeys', data.value.filter(item => movedKeys.includes(item.id)));
  isSelectionChanged.value = JSON.stringify(newVal) !== JSON.stringify(initialValue.value);
};

const leftArr = ref([]);
function getNonDuplicateItems(arr1, arr2) {
  const set1 = new Set(arr1);
  const set2 = new Set(arr2);
  leftArr.value = [...arr1.filter(item => !set2.has(item)), ...arr2.filter(item => !set1.has(item))];
}

const data = ref([]);
const value = ref([]);

const addlist = function () {
  if (value.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '已选职称类别不能为空',
    });
    return;
  }
  loading.value = true; // 开启加载状态
  getNonDuplicateItems(data.value, rightArr.value);
  const leftArrId = leftArr.value.map(item => item.id);

  updateTitleCategory({
    'titleHaveCategory': value.value,
    'titleOptionalCategory': leftArrId
  })
      .then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: res.data,
          });
        } else {
          ElMessage({
            type: 'info',
            message: res.msg,
          });
          titleCategoryList({ userFlag: "" })
              .then((res) => {
                data.value = res.data;
                titleCategoryList({ userFlag: "1" })
                    .then((res) => {
                      let rightA = [];
                      for (let i = 0; i < res.data.length; i++) {
                        rightA.push(res.data[i].id);
                      }
                      value.value = rightA;
                      initialValue.value = [...rightA];
                      isSelectionChanged.value = false;
                    });
              });
        }
      })
      .catch(() => {
        ElMessage({
          type: 'error',
          message: '保存失败，请稍后重试'
        });
      })
      .finally(() => {
        loading.value = false; // 关闭加载状态
      });
};
</script>

<style scoped lang="scss">
.edit_fei {
  :deep(.el-transfer-panel) {
    width: 40% !important;
  }
}
</style>    